// pages/Network/Network.js
import * as echarts from '../../ec-canvas/echarts';  //引入echarts
function setOption(chart, xlist1, xlist2) {
  var option = {
    color: ['#FF9F17', '#317FFF'], //柱子颜色
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left:10,
      right:11,
      bottom:106,
      top: 77
    //   x: 50,
    //   y: 100,
    //   x2: 50,
    //   y2: 30
    },
    legend: [
      {
      orient: 'horizontal',
      icon: "circle", 
      // align: 'right',
      top:"3%",
      left: '64%',
      data: ['网点销售'],  
      textStyle:{  
          fontSize: 15,  
          color:'#000000'  
      } 
      },{
        orient: 'horizontal',
        icon: "circle", 
        // align: 'right',
        top:"8%",
        left: '64%',
        data: ['网点销售额'],  
        textStyle:{  
            fontSize: 15,  
            color:'#000000'  
        } 
        }],
    toolbox: { //侧边调整图形的
      show: false,
      // orient: 'vertical',
      // left: 'right',
      // top: 'center',
      // feature: {
      //     mark: {show: true},
      //     dataView: {show: true, readOnly: false},
      //     magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
      //     restore: {show: true},
      //     saveAsImage: {show: true}
      // }
    },
    xAxis: [{
      type: 'category',
      axisTick: {
        show: true
      },
      axisTick:{show:false},//轴刻度线
      axisLabel: {
        interval: 0,
        show: true,
            textStyle: {
                color: '#000000',
                fontSize: 14, 
            },
        formatter: function (value) {
          //x轴的文字改为竖版显示
          var str = value.split("");
          return str.join("\n");
        }
      },
      data: ['荔湾区府', '荔湾区住建局', '越秀区', '天河区', '白云区']
    }],
    yAxis: [{
      type: 'value',
      axisTick:{show:false},//y轴刻度线
      splitLine: {show: false}, //去除网格线
      axisLabel: {
        formatter: function (value) { //修改y轴数值
          var texts = [];
          // if(value==0){
          // texts.push('');
          // }
          return texts;
        }
      },
    }],
    series: [{
        name: '网点销售',
        type: 'bar',
        data: xlist1, //x轴对应列的值
        itemStyle: { //上方显示数值
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: '#333333',
                fontSize: 14
              }
            }
          }
        }
      },
      {
        name: '网点销售额',
        type: 'bar',
        data: xlist2, //x轴对应列的值
        itemStyle: { //上方显示数值
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: '#333333',
                fontSize: 14
              }
            }
          }
        }
      },
    ]
  };
  chart.setOption(option);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    xlist:[],
    xlist2:[],
    isok: 0,
  },
  // tab切换
  week(){ // 切换本周
    this.setData({
      isok:0,
      xlist1:[20,60,100,200,500],
      xlist2:[50,90,150,100,300]
    })
    this.init_one(this.data.xlist1, this.data.xlist2)
  },
  month(){ // 切换近一月
    this.setData({
      isok:1,
      xlist1:[50,90,150,100,300],
      xlist2:[50,90,150,100,300]
    })
    this.init_one(this.data.xlist1, this.data.xlist2)
  },
  getOneOption:function(){ //初始化
    this.setData({
      xlist1:[20,60,100,200,500],
      xlist2:[50,90,150,100,300]
    })
    this.init_one(this.data.xlist1, this.data.xlist2)
  },
  init_one: function (xlist1, xlist2) {           //初始化第一个图表
    console.log(this.oneComponent)
    this.oneComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setOption(chart, xlist1,xlist2)  //赋值给echart图表
      this.chart = chart;
      return chart;
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.oneComponent = this.selectComponent('#mychart-dom-bar');
    this.getOneOption();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
    
  },

})

